<template>
	<div>
		<el-menu :default-active="activeItemName"   @select="handleSelect">
		  <el-menu-item :index="homeMenu.routerName"  @click="menuNav(homeMenu)">{{homeMenu.name}}</el-menu-item>
		  <el-submenu v-for="item in menu" v-bind:key="item.name" :index="item.name">
			  <template slot="title">
			    <i :class="item.icon"></i>
			    <span slot="title">{{item.name}}</span>
			  </template>	  
			  <el-menu-item-group v-for="menuItem in item.menuItem" v-bind:key="menuItem.id">
			    <el-menu-item :index="menuItem.routerName"  @click="menuNav(menuItem)">{{menuItem.name}}</el-menu-item>
			  </el-menu-item-group>
		  </el-submenu>
		</el-menu>
	</div>
</template>

<style>
</style>

<script>
 import {mapActions} from "vuex"
  export default { 
    data() {
      return {
	  };
    },
	props:{
		menu:Array,
		homeMenu:Object
	},
	computed: {
		activeItemName: {
			get() {
				return this.$store.state.activeItemName;
			},
			set(val) {
				this.$store.state.activeItemName= val;
			}
		},
	},
	
    methods: {
		...mapActions({
			menuNav:'editableTabs'
		}),
		 handleSelect(key, keyPath) {
		
		}
    }
  }
</script>